<template>
  <el-form-item
    :prop="prop"
    :label="label">
    <el-input
      v-model="value"
      :maxlength="maxlength"
      :minlength="minlength"
      :placeholder="placeholder"
      :clearable="clearable"
      :disabled="disabled"
      :show-word-limit="showWordLimit"
      :rows="rows"
      :autosize="autosize"
      type="textarea"
      @blur="handleBlur"
      @focus="handleFocus"
      @change="handleChange"
      @input="handleInput"
      @clear="handleClear"
    >

    </el-input>
  </el-form-item>
</template>

<script setup lang="ts" name="BaseTextArea">
import { computed } from 'vue'
interface autosizeType {
  minRows: number,
  maxRows: number
}
let props = withDefaults(defineProps<{
    prop?: string,
    label?: string,
    placeholder?: string,
    clearable?: boolean,
    disabled?: boolean,
    rows?: number,
    maxlength?: number,
    minlength?: number,
    showWordLimit?: boolean,
    autosize?: autosizeType,
    modelValue: any
  }>(), {
    modelValue: '',
    rows: 3,
    autosize: () => {
      return {
        minRows: 3,
        maxRows: 3
      }
    }
  })
let emits = defineEmits(['input', 'blur', 'change', 'clear', 'focus', 'update:modelValue'])

const value = computed({ // 重新定义
  get: () => props.modelValue,
  set: (value: string) => emits("update:modelValue", value),
})

// 失焦时间
function handleBlur (event: FocusEvent) {
  emits('blur', event)
}
// 获得焦点事件
function handleFocus (event: FocusEvent) {
  emits('focus', event)
}
// 内容改变事件
function handleChange (val: any) {
  emits('change', val)
}
// input 事件
function handleInput (val: any) {
  emits('input', val)
}
// 清除内容事件
function handleClear () {
  emits('clear', '')
}

</script>

<style lang="less" scoped>
 .container {
 }
</style>
